<template>
  <div>
    <!-- 表格 -->
    <div>
      <el-table
        :data="tableData"
        :border="border"
        highlight-current-row
        :cell-style="tableStyle"
        @cell-click="tableCellClick"
      >
        <el-table-column
          v-for="(item, index) in headerData"
          :key="index"
          :index="index"
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <div v-if="item.slot">
              <slot :name="item.prop" v-bind:row="scope.row"></slot>
            </div>
            <div v-if="!item.slot">
              {{ tableData[scope.$index][item.prop] }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div v-if="ispagination">
      <el-pagination
        :page-sizes="[10, 20, 50, 500]"
        :page-size="limit"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev,pager,next,jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleSizeChange(val) {
      let _self = this;
      _self.$emit("sizeChange", val);
    },
    handleCurrentChange(val) {
      let _self = this;
      _self.$emit("currentChange", val);
    }
  },
  props: {
    headerData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    border: {
      type: Boolean,
      default: () => {
        return true;
      }
    },
    ispagination:{
      type:Boolean,
      default:()=>{
        return true;
      }
    },
    total: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    limit: {
      type: Number,
      default: () => {
        return 20;
      }
    },
    currentPage: {
      type: Number,
      default: () => {
        return 1;
      }
    },
    tableStyle: {
      type: Function,
      default: () => {}
    },
    tableCellClick: {
      type: Function,
      default: () => {}
    }
  }
};
</script>
